<template>
	<tm-app color="#efefef">
		<view class="flex flex-between pl-30 FormM1">
			<navbar-module title="待服务工单" :transprent="true" />
		</view>
		<tm-sheet :padding="[2,2]" style="margin-top:-200rpx">
			<view v-if="!showWin">
				<tm-cell bottomBorder :margin="[0,0]" title="工单编号" :rightText="itemData.code" :titleFontSize="32"
					:rightTextSize="32" rightColor="#333" />
				<tm-cell bottomBorder :margin="[0,0]" title="服务项目" :rightText="itemData.content.combo.name"
					:titleFontSize="32" :rightTextSize="32" rightColor="#333" />
				<tm-cell bottomBorder :margin="[0,0]" title="猪仔名称" :rightText="itemData.pig.name" :titleFontSize="32"
					:rightTextSize="32" rightColor="#333" />
				<tm-cell bottomBorder :margin="[0,0]" title="所属猪圈" :rightText="itemData.pig.pigsty.name"
					:titleFontSize="32" :rightTextSize="32" rightColor="#333" />
				<tm-cell bottomBorder :margin="[0,0]" title="服务描述:" :titleFontSize="32">
					<template v-slot:right></template>
				</tm-cell>
				<tm-text style="margin: 10rpx 20rpx;text-indent: 2rem;" :label="itemData.content.combo.description"
					:fontSize="32" />

				<tm-cell bottomBorder :margin="[0,0]" title="创建时间" :rightText="itemData.createTime" :titleFontSize="32"
					:rightTextSize="32" rightColor="#333">
				</tm-cell>
			</view>
			<view v-else class="flex flex-center flex-col pa-20">
				<ezplayer v-show="!clzTipShow && !wcTipShow" id="ezplayer" :accessToken="cameraUrl[0].accessToken"
					:url="cameraUrl[0].url" plugins="" recPlayTime="" width="320" height="175" />
				<tm-text label="若播放不起,请检查摄像头是否已开启" color="orange"></tm-text>
				<view style="width: 320px;height:175px;background-color: white" v-show="clzTipShow || wcTipShow"></view>

				<view v-if="!modalBtnFlag" class="flex flex-center mt-30">
					<tm-button width="400" color="#23C343" :round="10" label="开始服务" :fontSize="34"
						@click="modalBtnclick"></tm-button>
				</view>
				<view v-else class="flex flex-between fulled mt-30">
					<tm-button :round="10" label="重新录制" :fontSize="34" color="#ff9a2e" outlined
						@click="clzTipShow = true"></tm-button>
					<tm-button :round="10" label="完成服务" :fontSize="34" color="#23C343"
						@click="wcTipShow = true"></tm-button>

				</view>
			</view>
		</tm-sheet>


		<view style="position: absolute;bottom:0; width: 750rpx;">
			<tm-button v-if="btnFlag" @click="btnclick" :margin="[20]" block size="large"
				:linear-color="['#FADC19', '#23C343']" linear="right" :height="90" :shadow="0" :label="btnlabel"
				:fontSize="34" />
		</view>

		<tm-modal ref="modal2" :overlayClick="false" splitBtn v-model:show="clzTipShow">
			<tm-text label="是否完成服务,该功能只在服务工作进行之前使用" :fontSize="36" class="flex flex-center"></tm-text>
			<template v-slot:button>
				<view class="fulled flex flex-between">
					<tm-button outlined label="取消" :round="10" color="#ff9a2e" @click="clzTipShow = false"></tm-button>
					<tm-button label="确定" :round="10" color="#ff9a2e" @click="againRecord" />
				</view>
			</template>
		</tm-modal>

		<tm-modal ref="modal3" :overlayClick="false" splitBtn v-model:show="wcTipShow">
			<tm-text label="服务已完成,确认提交" :fontSize="36" class="flex flex-center"></tm-text>
			<template v-slot:button>
				<view class="fulled flex flex-between">
					<tm-button outlined label="取消" :round="10" color="#23C343" @click="wcTipShow = false"></tm-button>
					<tm-button label="确定" :round="10" color="#23C343" @click="btnclick" />
				</view>
			</template>
		</tm-modal>
		<tm-message ref="msg" :lines="2" />
		<tm-notification placement="top" ref="notif" :offset="[32,90]" />
	</tm-app>
</template>

<script setup lang='ts'>
	import {
		ref,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		startVideo,
		referService,
		stop
	} from '../../index/resource/http'
	import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
	import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'

	const msg = ref < InstanceType < typeof tmMessage > | null > (null)
	const notif = ref < InstanceType < typeof tmNotification > | null > (null)

	const itemData = ref(null)
	const cameraUrl = ref([])
	const clzTipShow = ref(false)
	const wcTipShow = ref(false)

	onLoad((option) => {
		itemData.value = JSON.parse(decodeURIComponent(option.data))
		itemData.value.cameraUrl.forEach(item => {
			const val = JSON.parse(item)

			// split方法
			const arr = val.url.split('/')
			// console.log(arr,'拆分的url');
			const numArr = arr[4].split('.')
			arr[4] = numArr[0]
			arr[5] = numArr[2]
			const url = arr.join('/')
			// console.log(url,'组装的url');
			val.url = url

			cameraUrl.value.push(val)
		})
	})

	const btnlabel = ref('开始服务')
	const btnFlag = ref(true)
	const showWin = ref(false)
	const modal = ref(null)
	const modalBtnFlag = ref(false)

	const btnclick = async () => {
		if (btnFlag.value) {
			btnlabel.value = '确定完成'
			btnFlag.value = false
			showWin.value = true
		} else {
			// 提交
			const res2 = await stop(itemData.value.code)
			const res = await referService({
				id: itemData.value.id
			})
			if (res.code == '0' && res2.code == '0') {
				// modal.value.close()
				msg.value.show({
					model: 'success'
				})
				setTimeout(() => {
					wx.disableAlertBeforeUnload()
					uni.navigateBack()
				}, 1300)
			} else {
				let message = null
				if(res.code == '0'){
					message = res2.message
				}else{
					message = res.message
				}
				nextTick(() => {
					notif.value?.show({
						label: message,
						color: '#FF837F'
					})
				})
			}
		}

	}

	// 开始录制
	const modalBtnclick = async () => {
		// 调接口开始录制
		const res = await startVideo(itemData.value.code)

		if (res.code == 0) {
			modalBtnFlag.value = true
			uni.showToast({
				title: "已开始录制",
				icon: "success",
				duration: 1000
			});
		}

		// 监听返回事件
		wx.enableAlertBeforeUnload({
			message: "录像已开启，确认退出吗？",
			success: function(res) {
				console.log("成功：", res);
			},
			fail: function(err) {
				console.log("失败：", err);
			},
		});
	}

	//重新录制
	const againRecord = async () => {
		// 调接口开始录制
		const res = await startVideo(itemData.value.code)

		if (res.code == 0) {
			clzTipShow.value = false
			uni.showToast({
				title: "已开始录制",
				icon: "success",
				duration: 1000
			});
		}
	}
</script>

<style>

</style>